{% extends "base.html" %}

{% block title %}Home - Volunteer Platform{% endblock %}

{% block content %}
<div class="hero">
    <h1>LOVE&&PEACE</h1>
    <p>Connecting volunteers with charitable organizations to create a better world together</p>
</div>
<div style="text-align: center;">
<section class="featured-activities">
    <h2>Latest Activities</h2>
    <div class="activities-grid">
        {% for activity in activities %}
        <div class="activity-card">
            <h3>{{ activity.title }}</h3>
            <p class="activity-date">
                Start Time: {{ activity.start_date.strftime('%Y-%m-%d %H:%M') }}<br>
                End Time: {{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}
            </p>
            <p class="activity-location">Location: {{ activity.location }}</p>
            <p class="activity-description">{{ activity.description[:100] }}...</p>
            <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn">View Details</a>
        </div>
        {% endfor %}
    </div>
</section>

<section class="platform-features">
    <h2>Platform Features</h2>
    <div class="features-grid">
        <div class="feature">
            <h3>Volunteers</h3>
            <p>Browse and participate in various volunteer activities, record volunteer hours, share volunteer experiences</p>
        </div>
        <div class="feature">
            <h3>Charitable Organizations</h3>
            <p>Post activity information, manage volunteers, track activity progress</p>
        </div>
        <div class="feature">
            <h3>Easy Management</h3>
            <p>Simple activity posting and registration process, real-time activity status updates</p>
        </div>
    </div>
</section>
</div>
{% endblock %} 